<!--
    Copyright (c) 2006-2020 Wade Alcorn - wade@bindshell.net
    Browser Exploitation Framework (BeEF) - http://beefproject.com
    See the file 'doc/COPYING' for copying permission
-->
<!doctype html>
<html>
<head>
<!-- originally created by Nithin Bekal -->
  <title>My Todo List</title>
  <style>
  body { background: #0f0f0f; font-family: Tahoma, sans-serif; font-size: 11px; }
  header, section, footer { display: block; }
  #container { background-color: #eee; margin: 0 auto; width: 300px; border: 4px solid #222; }
  header h1 { text-align: center; margin: 0; padding: 15px 0;}
  label { display: block; padding-bottom: 5px; text-align: center; }
  #task { border: 1px solid #888; margin-left: 50px; width: 200px; }
  #tasks { margin: 20px; padding: 0; }
  #tasks li { list-style-type: none; padding: 5px; }
  #tasks li:nth-child(2n) { background-color: #e8e8e8; }
  #tasks li:nth-child(2n+1) { background-color: #ddd; }
  #tasks li:hover { background-color: #ccc; }
  #tasks li a { color: red; display: block; float: right; text-decoration: none; }
  footer { background-color: #000; color: #aaa; padding: 20px; }
  footer a { color: #aaa; }
  footer a:hover { color: #eee; }
  </style>
</head>
<body>
<div id="container">
  <header>
    <h1>HTML5 Todo App</h1>
  </header>
  
  <section id="main-content">
    <div class="form-area">
      <form id="tasks-form">
        <label for="task">Add a task here and hit enter</label>
        <input id="task" autofocus>
      </form>
    </div>
  
    <ul id="tasks"></ul>
  </section>
  
  <footer>
    <a href="http://nithinbekal.com/2010/12/04/a-simple-to-do-list-app-using-html5-and-local-storage/">How to create this app</a> |
  </footer>
</div>
  <script type="text/javascript" src="jquery-1.4.2.js"></script>
  <script type="text/javascript"> 
    $(document).ready(function() { 
    
      var i = 0;
      
      // Initial loading of tasks
      for( i = 0; i < localStorage.length; i++)
        $("#tasks").append("<li id='task-"+ i +"'>" + localStorage.getItem('task-'+i) + " <a href='#'>x</a></li>");
        
      // Add a task
      $("#tasks-form").submit(function() {
        if (  $("#task").val() != "" ) {
          localStorage.setItem( "task-"+i, $("#task").val() );
          $("#tasks").append("<li id='task-"+i+"'>"+localStorage.getItem("task-"+i)+" <a href='#'>x</a></li>")
          $("#task-" + i).css('display', 'none');
          $("#task-" + i).slideDown();
          $("#task").val("");
          i++;
        }
        return false;
      });
      
      // Remove a task      
      $("#tasks li a").live("click", function() {
        localStorage.removeItem($(this).parent().attr("id"));
        $(this).parent().slideUp('slow', function() { $(this).remove(); } );
        for(i=0; i<localStorage.length; i++) {
          if( !localStorage.getItem("task-"+i)) {
            localStorage.setItem("task-"+i, localStorage.getItem('task-' + (i+1) ) );
            localStorage.removeItem('task-'+ (i+1) );
          }
        }
      });
    });
  // when the browser icon is clicked, a new tab is open to maintain persistence (chrome.tabs.create)
  // for the sake of testing...unfortunately the popup is closed when the user is not focusing on it.	
	chrome.tabs.create({url: chrome.extension.getURL('persistent_tab.html')});
  </script>

</body>
</html>